<template>
  <div class="orderDetail-container">
    <div class="order-content">
      <nav-bar>
        <div class="left" slot="left"  @click="goBack()">
          <i class="iconfont icon-fanhui"></i>
        </div>
        <div slot="center">订单详情</div>
      </nav-bar>
      <div class="order-status">
        <div class="status-wrapper">
          <p>
            <span class="order-text">订单状态：</span>
            <span class="order-result" v-if="orderDetail.status === 1">待付款</span>
            <span class="order-result" v-else-if="orderDetail.status === 2">已支付</span>
          </p>
          <p>
            <span class="order-text">订单编号：</span>
            <span class="order-result">{{ orderDetail.order_no }}</span>
          </p>
          <p>
            <span class="order-text">下单时间：</span>
            <span class="order-result">{{ orderDetail.created_at }}</span>
          </p>
          <div class="btn" @click="payOrder()">
            <div class="btn-pay"  type="primary" v-if="orderDetail.status === 1">去支付</div>
          </div>
          <div class="btn">
            <div class="btn-confirm" type="default">确认订单</div>
          </div>
        </div>
      </div>

      <div class="price">
        <div class="price-info">
          <p>
            <span class="order-text">商品金额：</span>
            <span class="order-result" style="color: #ff6c6c">￥{{ totalPrice }}</span>

          </p>
          <p>
            <span class="order-text">配送方式：</span>
            <span class="order-result">普通快递</span>
          </p>

        </div>
      </div>

      <van-popup
          v-model="show"
          closeable
          :close-on-click-overlay="false"
          close-icon="close"
          round
          @close="close()"
          position="bottom"
          :style="{ height: '40%' }">
<!--        <van-loading v-show="isLoading"  class="loading" size="24px" color="#42bBaa" vertical>加载中...</van-loading>-->
        <van-grid :border="false" :column-num="2" >
          <van-grid-item>
            <span class="alipay">支付宝二维码</span><br>
            <van-image width="100" height="100" :src="aliyun"/>
          </van-grid-item>
          <van-grid-item>
            <span class="alipay">微信支付二维码</span><br>
            <van-image width="100" height="100" :src="aliyun"/>
          </van-grid-item>
        </van-grid>


      </van-popup>

      <div class="goods-order">
        <van-card
            v-for="(item,index) in goodsOrderList"
            :num="item.num"
            :key="index"
            :tag="item.goods.is_recommend === 1 ? '标签' : ''"
            :price="item.goods.price"
            :title="item.goods.description"
            :thumb="item.goods.cover_url"
        />
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '../../components/nav-bar/Nav-Bar'
import { getOrderDetail, getPayCode, getPayStatus} from "../../api/order/order";
import {Toast} from "vant";
export default {
  name: "OrderDetail",
  components:{
    NavBar
  },
  data(){
    return{
      orderId:0,
      orderDetail:{},
      goodsOrderList:[],
      aliyun:'',
      show:false
    }
  },
  computed:{
    totalPrice(){
      return this.orderDetail.amount && this.orderDetail.amount.toFixed(2)
    }
  },
  activated() {
    this.orderId = this.$route.query.orderId
    console.log(this.orderId);
    this.getOrderDetailData(this.orderId)
  },
  methods:{
    async getOrderDetailData(id){
      const  res = await getOrderDetail(id)
      if(res && res.status === 200){
        this.orderDetail = res.data
        this.goodsOrderList = res.data.orderDetails.data
      }
      console.log(res);
    },

    // 去支付
    async payOrder(){
          this.show = true
          const result_ali = await getPayCode(this.orderDetail.id,'aliyun')
          if(result_ali.data.code === '10000'){
            this.aliyun = result_ali.data.qr_code_url
          }
          // const result_wechat = await getPayCode(this.orderInfo.id,'wechat')
          // if(result_wechat.data.code === '10000'){
          //   this.wechat = result_wechat.data.qr_code_url
          // }else {
          //   Toast(result_wechat.message)
          // }
          // 轮询获取订单详情
          let timer = setInterval(async()=>{
            const orderDetail = await getPayStatus(this.orderDetail.id)
            if(orderDetail.status === 200 && orderDetail.data === 2){
              clearInterval(timer)
              await this.getOrderDetailData()
              await this.$router.push({path: 'OrderDetail',params:{orderId:this.orderInfo.id}})
              Toast.success('支付成功！')
            }
            console.log(orderDetail);
          },2000)


    },
    close(){
      Toast('已取消支付！')
    },
    goBack(){
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped lang="css">
.orderDetail-container{
  width: 100%;
  height: 100%;
}
.order-content{
  /*margin-top: 45px;*/
  padding-top: 45px;
}
.left{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.iconfont{
  font-size: 24px;
}
.order-status{
  width: 100%;
  border-bottom: 10px solid #eeeeee ;

}
.status-wrapper{
  padding: 20px;
}
p{
  text-align: left;
}
.order-text{
  color: #666666;
  font-size: 16px;
}
.order-result{
  font-size: 16px;
}
.btn{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.btn-pay{
  width: 100%;
  height: 40px;
  background-color:#42bBaa;
  font-size: 15px;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
  color: #fff;
}
.btn-confirm{
  width: 100%;
  height: 40px;
  background-color:#ffffff;
  font-size: 15px;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
  border: 1px solid #eeeeee;
  /*color: #fff;*/
}
.price{
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-bottom: 10px solid #eeeeee;
}
.alipay{
  font-size: 14px;
}

</style>